<template>
  <div class="notice">
    <div class="notice-top cur-flex cur-justify-between h5-hairline--bottom">
      <div class="top-left">
        <span @click="activeTab ='system'" class="item" :class="{'active':activeTab === 'system'}">系统消息</span>
        <span class="line">|</span>
        <span @click="activeTab = 'site'" class="item" :class="{'active':activeTab === 'site'}">站内消息</span>
      </div>

    </div>
    <transition name="slideRightInLeftOut" mode="out-in">
      <component :is="view"></component>
    </transition>
    <!--  -->
  </div>
</template>
<script>
import System from './system'
import Site from './site'
export default {
  title: '消息中心',
  components: {
    System,
    Site
  },
  data () {
    return {
      activeTab: 'system',
      viewList: {
        system: System,
        site: Site
      }
    }
  },
  computed: {
    view () {
      return this.viewList[this.activeTab]
    }
  },
  methods: {}
}
</script>
<style lang="scss">
.notice {
  min-height: 100%;
  background-color: $white;
  position: relative;
  &-top {
    padding: 26px;
    // border-bottom: 1px solid $border-color;
    .top-left {
      font-size: 26px;
      color: $text-color;
    }
    .item {
      font-size: 26px;
    }
    .item.active {
      color: $red;
    }
    .line {
      padding: 0 26px;
    }
  }
  .top-right {
    color: #808080;
    font-size: 26px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 26px;
    .line{
      padding: 0 26px;
    }
    .remove{
      color: $red;
    }
  }
}
</style>
